@charset "UTF-8";
/**
 * 
 * @authors Candy
 * @date    2016-07-04 10:39:39
 * @version 1.1.0
 */

/*-------------------------    start  ------------------------- */
html,body{ font-size: 125%; background-color: #f4f4f4;}
body{ font-family: "微软雅黑", "Microsoft Yahei", Arial, Verdana; padding: 0;}
span { cursor: pointer;}
li:active{ background-color: #ccc !important;}
.fl{ float: left;}
.fr{ float: right;}
.clearfix:after{ content: ""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size: 0;}
.clearfix{ *zoom: 1;}
.ell{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.overflow{ overflow: hidden;}
.borderRadius{ border-radius: 50%;}
input,a{ outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
[v-cloak]{ display: none;}

/*-------------------------    end  ------------------------- */

/* 定位 */
.pa{ position: absolute;}
.pr{ position: relative;}
.pf{ position: fixed;}
/* block */
.db{ display: block;}
.dib{ display: inline-block;}
.dn{ display: none;}
/* text */
.textC{ text-align: center;}
.textL{ text-align: left;}
.textR{ text-align: right;}
/*background-color*/
.bgff{ background-color: #fff;}
.bgf4{ background-color: #f4f4f4;}
/* border */
.border{ border: 1px solid #ededed;}
.borderN{ border: none;}
.borderT{ border-top: 1px solid #ededed;}
.borderB{ border-bottom: 1px solid #ededed;}
/* 灰色背景层 */
.borderspace{ border-bottom: 0.25rem solid #f4f4f4;}
.borderTS{ border-top: 0.25rem solid #f4f4f4;}
/* border-radius */
.bRadius{ border-radius: 5px;}
/*font-size*/
.font18{ font-size: 0.5rem;}
.font20{ font-size: 0.55rem;}
.font22{ font-size: 0.6rem;}
.font24{ font-size: 0.65rem;}
.font26{ font-size: 0.7rem;}
.font28{ font-size: 0.8rem;}
.font34{ font-size: 0.94rem;}
.normal{ font-weight: normal;}
/*padding*/
.pad24{ padding: 2.4%;}
.padTB24{ padding-top: 2.4%; padding-bottom: 2.4%;}
.padLR24{ padding-left: 2.4%; padding-right: 2.4%;}
.padT24{ padding-top: 2.4%;}
.padB24{ padding-bottom: 2.4%;}
.pad375{ padding: 3.75%;}

.padT23{ padding-top: 2.3rem;}
.padB23{ padding-bottom: 2.3rem;}
/*margin*/
.mar24{ margin: 2.4%;}
.marTB24{ margin-top:2.4%; margin-bottom: 2.4%;}
.marT24{ margin-top: 2.4%;}
.marB24{ margin-bottom: 2.4%;}
.marL24{ margin-left: 2.4%;}
.marR24{ margin-right: 2.4%;}

.mar12{ margin: 1.2%;}
.marT12{ margin-top: 1.2%;}
.marB12{ margin-bottom: 1.2%;}
/*width*/
.wh45{ width: 0.95rem; height: 0.95rem;}
/*line-height*/
.line95{ line-height: 0.95rem;}
/*color*/
.color21{ color: #212121;}
.color22{ color: #222;}
.colorB{ color: #0288d1;}
.colorb6{ color: #b6b6b6;}
.color3b{ color: #ffeb3b;}
.color44{ color: #444;}
.color72{ color: #727272;}
.colorff{ color: #fff;}

/*头部*/
.header{ position: fixed; top: 0; left: 0; z-index: 20; width: 100%; height: 2.3rem; line-height: 2.3rem; color: #fff; background-color: #03a9f4;
	h1{ margin: auto; width: 50%; text-align: center; font-size: 0.94rem; font-weight: normal;}
	.icon{ position: absolute; top: 50%; z-index: 21; display: block; margin-top: -1.01rem; padding: 0.5rem; width: 1.02rem; height: 1.02rem; background: url(../images/header.png); background-clip: content-box; background-size: auto 3.05rem;}
	.userIcon{ left: 0; background-position: 0.5rem 0.5rem;}
	.back{ left: 0; background-position: -0.5rem 0.5rem;}
	.cateIcon{ right: 0; background-position: -0.5rem -0.5rem;
		&.on{ background-position: 0.5rem -0.5rem;}
	}
	.addIcon{ right: 0; background-position: -1.54rem 0.5rem;}
	.shareIcon{ right: 12%; background-position: -1.54rem -0.52rem;}
	.flIcon{ right: 0; background-position: -2.51rem -1.54rem;}

	.text{ position: absolute; top: 0; right: 2.4%; z-index: 21; font-size: 0.85rem; color: #fff;}
	.down{ position: absolute; top: 42%; content: ''; display: inline-block; margin-left: 2%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #fff;}
}
.search-box{ margin: 0.4rem auto; width: 70%; height: 1.5rem; line-height: 1.5rem; font-size: 0.6rem; color: #fff; background-color: #35baf6; border-radius: 5px;
	.search-btn{ display: block; margin: 0.24rem; width: 1.02rem; height: 1.02rem; background: url(../images/search.png); background-size: cover; outline: none; border: none;}
	.search-txt{ float: left; margin: 0.25rem 0; padding: 0.1rem 0.2rem; width: 70%; color: #fff; background-color: #35baf6; border: none; outline: none;
		&::-webkit-input-placeholder{ color: #fff;}
	}
	&.searchWhite{  margin: 0.4rem 0 0.4rem 0.4rem; width: 80%; background-color: #fff;
		.search-btn{ background: url(../images/search2.png); background-size: cover;}
		.search-txt{ color: #b6b6b6; background-color: #fff; /* border-left: 1px solid #03a9f4; */ border-radius: 0;
			&::-webkit-input-placeholder{ color: #b6b6b6;}
		}
	}
}
/*底部*/
.footer{ position: fixed; bottom: 0; left: 0; z-index: 20; width: 100%; background-color: #0fadf4; /*background-color: #eaeaea;*/ border-top: 1px solid #f0f0f0;
	.footerIcon{ display: block; float: left; padding: 0.2rem 0; width: 33.3%; text-align: center; font-size: 0.6rem; color: #fff; /*color: #727272;*/
		&.on{ color: #0288d1; background-color: #fff;}
		&:before{ content: ''; display: block; margin: auto; width: 1.02rem; height: 1.02rem; background: url(../images/footer.png); background-size: 3.05rem 2.05rem;}
	}
	.fhome{
		&:before{ background-position: -1.02rem 0;}
		&.on:before{ background-position: 0 0;}
	}
	.fques{
		&:before{ background-position: -2.04rem -1.02rem;}
		&.on:before{ background-position: -2.04rem 0;}
	}
	.fknow{
		&:before{ background-position: -1.02rem -1.02rem;}
		&.on:before{ background-position: 0 -1.02rem;}
	}
}

/*轮播*/
.swiper-container{ position: relative; width: 100%; overflow: hidden;}
.swiper-container .swiper-slide{ overflow: hidden; float: left;
	.bannerPhoto{ position: relative; display: block; width: 100%; overflow: hidden;
		img{ width: 100%;}
	}
}
.pagination{ position: absolute; right: 5%; bottom: 4%; width: 100%; z-index: 99; text-align: right;
	.swiper-pagination-bullet{ display: inline-block; margin: 0 1%; background-color: #fff; border-radius: 50%;}
	.swiper-pagination-bullet-active{ background-color: #0288d1;}
}

/*底部按钮*/
.btnB375{ position: fixed; bottom: 0; left: 0; z-index: 20; padding: 0.6rem 0; width: 100%; text-align: center; font-size: 0.8rem; color: #fff; background-color: #03a9f4;}
.btnGrey{ background-color: #ddd;}

/*到底了*/
.whether{ padding: 3.75%; display: block; font-size: 0.5rem; text-align: center; color: #727272;}

/*背景层*/
.cateBoxBg,.pop_bg,.popbg{ position: fixed; top: 2.3rem; left: 0; z-index: 20; width: 100%; height: 100%; background-color: #000; opacity: 0.3; -webkit-opacity: 0.3; -moz-opacity: 0.3; filter:alpha(opacity=30);}
.popbg{ z-index: 22; top: 0;}
.pop_bg{ display: none; z-index: 22; top: 0;}
/*alert*/
.pop_box{ position: fixed; top: 30%; left: 0; z-index: 23; display: none; margin-left: 22.5%; width: 55%; font-size: 0.65rem; text-align: center; color: #fff; background-color: #03a9f4; border-radius: 5px;
	.pop_text{ margin: 7% 0; font-size: 0.65rem;}
	.pop_desc{ display: block; margin-bottom: 5%; font-size: 0.6rem;}
	.pop_button{ width: 100%; font-size: 0.85rem; border-top: 1px solid #35baf6;
		.pop_btn{ display: inline-block; padding: 2.5% 0; width: 47%; color: #fff; cursor: pointer;
			&:first-child{ border-right: 1px solid #35baf6;}
		}
	}
	img{ margin: auto; width: 50%;}
	.close{ position: absolute; left: 5%; top: 5%; width: 0.8rem; height: 0.8rem; background: url(../images/icon/close.png); background-size: cover; cursor: pointer;}
	.pop_button.oneBtn{
		.pop_btn{ margin-left: 0;}
	}
	.fillInput{ padding: 1%; margin-bottom: 3.75%; width: 80%; height: 1rem; line-height: 1rem; border: none; border-radius: 5px; outline: none;}
	.textArea{ padding: 1%; margin-bottom: 3.75%; width: 100%; height: 5rem; border: 1px solid #ccc; outline: none; resize: none;}
}
/* 输入提示 */
.fill_tip { position: fixed; top: 25%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: 25; padding: 2.5% 0; width: 80%; font-size: 0.65rem; text-align: center; color: #fff; background-color: rgba(0, 0, 0, 0.5); border-radius: 5px;}

/*没有数据时*/
.noneCont{ display: block; padding-top: 30%; text-align: center; font-size: 0.6rem; color: #222;
	.noneImg{ display: block; margin: 5% auto; width: 25%;}
}

.iframeBox,iframe{
	img{ max-width: 100%;}
}

/* 320px */
@media screen and (min-width: 320px) {
	html{ font-size: 20px;}
}

/* 480px */
@media screen and (min-width: 480px) {
	html{ font-size: 30px;}
}

/* 750px */
@media screen and (min-width: 750px) {
	html{ font-size: 48px;}
}